<template>
  <view v-if="product_information.productName">
    <!--輪播图-->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(image,i) in swiperimg" :key = "i">
        <image :src="resourseUrl + image" @click="preview(i)"></image>
      </swiper-item>
    </swiper>
    <!--商品信息-->
    <view class="product-information">
      <!--價格-->
      <view class="price">{{product_information.price}}元</view>
      <!--信息-->
      <view class="product-main-info">
        <view class="product-name">{{product_information.productName}}</view>
        <!--收藏-->
        <view class="collect"></view>
        <uni-icons type="star" size="20" color="gray"></uni-icons>
        <text>收藏</text>
        
      </view>
      <!--运费-->
      <view class="freight">免运费</view>
    </view>
    <rich-text nodes="0"></rich-text>
    <!--导航组件区-->
    <view class="product-nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick"></uni-goods-nav>
    </view>
  </view>
</template>

<script>
  import {mapState, mapMutations, mapGetters} from 'vuex'
  export default {
    computed:{
      ...mapState('user',['resourseUrl']),
      ...mapGetters('shopCar',['total'])
    },
    //監听total的变化
    watch:{
      //total是偵听器，指向一個配置對象
      total:{
        //处理函數
        handler(newValue){
          const findResult = this.options.find(x => x.text === '购物车')
          if(findResult){
            findResult.info = newValue
          }
        },
        //是否页袑次加載就調用
        immediate: true
      }
    },
    data() {
      return {
        product_information:{},
        swiperimg:[],
        options: [{
        			icon: 'headphones',
        			text: '客服'
        		}, {
        			icon: 'shop',
        			text: '店铺',
        			info: 0,
        			infoBackgroundColor:'#007aff',
        			infoColor:"red"
        		}, {
        			icon: 'cart',
        			text: '购物车',
        			info: 0
        		}],
        buttonGroup: [{
        	text: '加入购物车',
        	backgroundColor: '#ff0000',
        	color: '#fff'
        },
        {
        	text: '立即购买',
        	backgroundColor: '#18BC37',
        	color: '#fff'
        }]
      };
    },
    onLoad(option){
      const product_id = option.product_id
      this.getProductDetail(product_id)
    },
    methods:{
      async getProductDetail(product_id){
        const {data: res} = await uni.$http.get('/product/detail/'+ product_id)
        if(res.meta.status !== 200) return uni.$showMessage()
        this.product_information = res.detail
        this.swiperimg.push(res.detail.img_url)
      },
      //点击輪播图進入放大预覽
      preview(i){
        uni.previewImage({
          current: i,
          urls: this.swiperimg
        })
      },
      //底部導航区的点击效果
      onClick(botton){
        if(botton.content.text === "购物车"){
          uni.switchTab({
            url:'/pages/shopCar/shopCar'
          })
        }
      },
      ...mapMutations('shopCar',['addToShopCar']),
      buttonClick(button){
        if(button.content.text === '加入购物车'){
          //包裝个商品属性先
          const product = {
            product_id :this.product_information.product_id,
            productName :this.product_information.productName,
            price:this.product_information.price,
            product_count:1,
            img_url:this.product_information.img_url,
            unit:this.product_information.unit,
            product_state:true
          }
          this.addToShopCar(product)
        }
      }
    }
  }
</script>

<style lang="scss">
swiper{
  height: 700rpx;
  image{
    width: 100%;
    height: 100%;
  }
}
.product-information{
    padding: 10px;
    padding-bottom: 50px;
    .price{
      color: #C00000;
      font-size: 18px;
      margin: 10px 0;
    }
    .product-main-info{
      display: flex;
      justify-content: space-between;
      .product-name{
        font-size: 14px;
        margin-right: 10px;
      }
      .collect{
        width: 120px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #EFEFEF;
        color: gray;
      }
    }
    .freight{
      font-size: 12px;
      color: gray;
      margin: 10px 0;
    }
}
.product-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%
}
</style>
